<template>
	<view class="reset-password">

		<!-- 手机号显示 -->
		<view class="phone-section">
			<view >
				<input 
				    class="phone-number" 
				    v-model="phoneNumber" 
				    placeholder="请输入手机号"
				  />
			</view>
			<view class="get-code-btn" @click="getVerificationCode">
				<text :class="['code-text', { 'disabled': isCountingDown }]">
					{{ countdownText }}
				</text>
			</view>
		</view>

	<!-- 	验证码输入区域 -->
		<view class="verification-section">
			<view class="input-group">
				<input 
					class="verification-input" 
					type="number" 
					placeholder="请输入短信验证码" 
					v-model="verificationCode"
					maxlength="6"
					@input="onVerificationInput"
				/>
			</view>
		</view>

		<!-- 下一步按钮 -->
		<view class="next-btn-section">
			<button 
				class="next-btn" 
				:class="{ 'active': canProceed }"
				:disabled="!canProceed"
				@click="handleNextStep"
			>
				下一步
			</button>
		</view>

		<!-- 提示消息 -->
		<view v-if="showToast" class="toast-message" :class="toastType">
			{{ toastMessage }}
		</view>
	</view>
</template>

<script>
	import { validatePhoneNumber, sendVerificationCode, verifyCode } from '@/utils/verification.js';
	
	export default {
		data() {
			return {
				phoneNumber: '19083139164', // 手机号
				verificationCode: '', // 验证码
				countdown: 0, // 倒计时
				isCountingDown: false, // 是否正在倒计时
				showToast: false, // 是否显示提示
				toastMessage: '', // 提示消息
				toastType: 'error', // 提示类型：error, success
				canProceed: false, // 是否可以进入下一步
				correctCode: '' // 正确的验证码
			}
		},
		computed: {
			countdownText() {
				if (this.countdown > 0) {
					return `${this.countdown}s`;
				}
				return '获取验证码';
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 验证码输入处理
			onVerificationInput() {
				this.checkCanProceed();
			},
			
			// 检查是否可以进入下一步
			checkCanProceed() {
				this.canProceed = this.verificationCode.length === 6;
			},
			
			// 获取验证码
			getVerificationCode() {
				if (this.isCountingDown) {
					return;
				}
				
				// 验证手机号格式
				if (!this.validatePhoneNumber()) {
					this.showToastMessage('请输入正确的电话号码', 'error');
					return;
				}
				
				// 开始倒计时
				this.startCountdown();
				
				// 模拟发送验证码
				this.simulateSendVerificationCode();
			},
			
			// 验证手机号格式
			validatePhoneNumber() {
				return validatePhoneNumber(this.phoneNumber);
			},
			
			// 开始倒计时
			startCountdown() {
				this.isCountingDown = true;
				this.countdown = 60;
				
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.isCountingDown = false;
					}
				}, 1000);
			},
			
			// 模拟发送验证码
			simulateSendVerificationCode() {
				sendVerificationCode(this.phoneNumber)
					.then(result => {
						this.correctCode = result.code;
						this.showToastMessage(result.message, 'success');
					})
					.catch(error => {
						this.showToastMessage(error.message, 'error');
					});
			},
			
			// 显示提示消息
			showToastMessage(message, type = 'error') {
				this.toastMessage = message;
				this.toastType = type;
				this.showToast = true;
				
				// 3秒后自动隐藏
				setTimeout(() => {
					this.showToast = false;
				}, 3000);
			},
			
			// 处理下一步
			handleNextStep() {
				if (!this.canProceed) {
					return;
				}
				
				// 验证验证码
				if (!verifyCode(this.verificationCode, this.correctCode)) {
					this.showToastMessage('验证码错误', 'error');
					return;
				}
				
				// 验证成功，跳转到设置新密码页面
				uni.navigateTo({
					url: '/pages/setNewPassword/setNewPassword'
				});
			}
		}
	}
</script>

<style scoped>
.reset-password {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 手机号区域 */
.phone-section {
	display: flex;
	align-items: center;
	gap: 250rpx;
	padding: 40rpx 30rpx 5rpx;
	background-color: #fff;
}

.phone-number {
	/* font-size: 30rpx;
	font-weight: bold; */
	padding: 15rpx 20rpx;
	color: #333;
}

/* 验证码区域 */
.verification-section {
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.verification-input {
	flex: 1;
	height: 80rpx;
	padding: 0 20rpx;
	/* border: 1rpx solid #ddd; */
	border-radius: 8rpx;
	font-size: 32rpx;
	background-color: #fff;
}

.get-code-btn {
	min-width: 160rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.code-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #007aff;
}

.code-text.disabled {
	color: #999;
}

/* 下一步按钮 */
.next-btn-section {
	padding: 200rpx 30rpx;
	
}

.next-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #ddd;
	background-color: #999;
	border: none;
}

.next-btn.active {
	background-color: #007aff;
}

/* 提示消息 */
.toast-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #fff;
	z-index: 999;
}

.toast-message.error {
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #fff;
	z-index: 999;
}

.toast-message.success {
    background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #fff;
	z-index: 999;
}

/* 图标字体 */
/* .iconfont {
	font-family: "iconfont";
}

.icon-arrow-left::before {
	content: "\e6db";
}

.icon-more::before {
	content: "\e6de";
}

.icon-minus::before {
	content: "\e6df";
}

.icon-circle::before {
	content: "\e6e0";
} */
</style>
